<template>
  <div class="c-bd-b12" v-if="enableQuestion == 1 && questionInfo.solution != null && questionInfo.solution.length > 0">
    <div class="c-bg-white c-ph24">
      <div class="c-flex-row c-justify-sb c-aligni-center c-pt24 c-fs26 c-fc-xblack c-lh">
        <div class="c-fs26 c-fc-xblack c-p borderL c-pl12">回答</div>
        <div
          v-if="answerInfo.isMe == 1 && questionInfo.status != -1"
          class="c-ww122 c-hh48 c-flex-row c-flex-center c-fs22 c-fc-white c-br32 theme-bg-gradient"
          @click="openAnswerModal(questionInfo.questionDetailId)"
        >继续回答</div>
      </div>
      <!-- list 回答内容 -->
      <template v-if="questionInfo.status == 2 && questionInfo.solution.length > 0">
        <div
          class="c-w100 c-pt30"
          v-for="(item, index) in questionInfo.solution"
          :class="index == questionInfo.solution.length - 1 ? '':'c-bd-b1'"
          :key="index"
        >
          <div class="c-flex-row">
            <div class="c-ww64 c-hh64 c-brp50">
              <img
                class="c-w100 c-h c-brp50"
                v-lazy="$addXossFilter(answerInfo.avatar || require('@/assets/defult_head.png'))"
                alt=""
              >
            </div>
            <div class="c-pl12 c-flex-column c-justify-sb c-flex-grow1 c-w0 c-hh64">
              <div class="c-flex-row c-justify-sb">
                <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-center c-text-ellipsis1">
                  <span class="c-text-ellipsis1">{{answerInfo.name}}</span>
                  <span class="answer_m c-ml12"></span>
                </div>
              </div>
              <div class="c-fs20 c-fc-gray">{{item.createdAt}}</div>
            </div>
          </div>
          <div class="c-w100 c-pt16 c-pb30">
            <div
              v-if="item.content"
              class="c-vcAlign-middle c-fs24 c-fc-xblack c-ws-pw"
            >{{item.content}}</div>
            <!-- 图片 -->
            <div
              class="c-w100 c-flex-row c-flexw-wrap c-mt8"
              v-if="item.imgUrl"
            >
              <div
                class="c-ww192 c-hh192 c-text-hidden thumbnail c-br10"
                v-for="(imgItem, imgIndex) in item.imgUrl"
                :key="imgIndex"
                @click="clickPreviewImage(imgItem, item.imgUrl, imgIndex)"
              >
                <img
                  class="c-w100 c-h img-pe-none c-object-fit-cover c-br10"
                  v-lazy="$addXossFilter(imgItem || require('@/assets/defult270.png'))"
                  alt=""
                >
              </div>
            </div>
            <!-- 语音 -->
            <div v-if="item.audioUrl">
              <div
                class="c-ww300 c-br10 c-pv16 c-ph20 c-fc-white c-bg-xgreen c-flex-row c-justify-center c-aligni-center"
                @click.stop="clickPlayAudio(item.audioUrl, item.recordTime)"
              >
                <img
                  class="c-ww30 c-hh30 c-rotate180"
                  v-if="playAduioSrc != item.audioUrl"
                  :src="require('@/assets/i/wap/course/chat_right_play.png')"
                  alt=""
                />
                <img
                  class="c-ww30 c-hh30 c-rotate180"
                  v-else
                  :src="require('@/assets/i/wap/course/chat_right_play.gif')"
                  alt=""
                />
                <div class="c-flex-row c-flex-center c-flex-1 c-fs24">点击播放</div>
                <span class="c-fs22 c-fc-white">{{item.recordTime}}"</span>
              </div>
            </div>
            <!-- 视频 -->
            <div v-if="item.videoMp4">
              <div class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center" @click.stop="clickShowVideo(item.videoMp4)">
                <i class="iconfont c-pa c-fs40" v-if="item.videoLogo != ''">&#xe869;</i>
                <img
                  class="c-w100 c-h c-br10 c-object-fit-cover"
                  :src="$addXossFilter(item.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')"
                  alt=""
                >
              </div>
            </div>
          </div>
        </div>
      </template>
      <div class="c-flex-row c-justify-sb c-aligni-center c-fs26 c-fc-xblack c-lh" v-if="chaseList.length > 0">
        <div class="c-fs26 c-fc-xblack c-p borderL c-pl12">追问</div>
      </div>
      <div
        class="c-pb24"
        v-for="(item, index) in chaseList"
        :key="index"
        :class="index == 0 ?'':'c-bd-t1'"
      >
        <!-- list 追问内容 -->
        <div class="c-w100 c-pt30">
          <div class="c-flex-row c-aligni-center">
            <div class="c-ww64 c-hh64 c-brp50">
              <img
                class="c-w100 c-h c-brp50"
                v-if="questionInfo.isMe != 1 && questionInfo.isHidden == -1"
                src="@/assets/no_login_head.png"
                alt=""
              >
              <img
                class="c-w100 c-h c-brp50"
                v-else
                v-lazy="$addXossFilter(item.questionAvatar || require('@/assets/defult_head.png'))"
                alt=""
              >
            </div>
            <div class="c-pl12 c-flex-column c-justify-sb c-flex-grow1 c-w0 c-hh64">
              <div class="c-flex-row c-justify-sb">
                <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-center c-text-ellipsis1">
                  <span class="c-text-ellipsis1" v-if="questionInfo.isMe == 1">{{questionInfo.comeFrom == 1 ? '我' : answerInfo.name}}</span>
                  <span class="c-text-ellipsis1" v-else>{{questionInfo.isHidden == -1 ? '匿名者' : questionInfo.questionName}}</span>
                </div>
              </div>
              <div class="c-fs20 c-fc-gray">{{item.questionTime}}
                <span>追问：</span>
              </div>
            </div>
            <span class="iconfont fs96 c-fc-sgray" v-if="item.status == -1">&#xe999;</span>
            <div
              class="c-ph24 c-hh48 c-ml12 c-flex-row c-flex-center c-fs22 c-fc-white c-br32 theme-bg-gradient"
              v-if="answerInfo.isMe == 1 && item.status !=-1"
              @click="openAnswerModal(questionInfo.questionDetailId, item)"
            >添加回答</div>
          </div>
          <div class="c-w100 c-mt8 c-pb24">
            <div
              class="c-vcAlign-middle c-fs24 c-fc-xblack c-ws-pw"
              v-if="item.detail"
            >{{item.detail}}</div>
            <!-- 图片 -->
            <div
              class="c-w100 c-flex-row c-flexw-wrap"
              v-if="item.imgUrl"
            >
              <div
                class="c-ww192 c-hh192 c-text-hidden thumbnail c-br10"
                v-for="(imgItem, imgIndex) in item.imgUrl"
                :key="imgIndex"
                @click="clickPreviewImage(imgItem, item.imgUrl, imgIndex)"
              >
                <img
                  class="c-w100 c-h img-pe-none c-object-fit-cover c-br10"
                  v-lazy="$addXossFilter(imgItem || require('@/assets/defult270.png'))"
                  alt=""
                >
              </div>
            </div>
            <!-- 语音 -->
            <div class="c-mt24" v-if="item.audioUrl">
              <div
                class="c-ww300 c-br10 c-pv16 c-ph20 c-fc-white c-bg-xgreen c-flex-row c-justify-center c-aligni-center"
                @click.stop="clickPlayAudio(item.audioUrl, item.recordTime)"
              >
                <img
                  class="c-ww30 c-hh30 c-rotate180"
                  v-if="playAduioSrc != item.audioUrl"
                  :src="require('@/assets/i/wap/course/chat_right_play.png')"
                  alt=""
                />
                <img
                  class="c-ww30 c-hh30 c-rotate180"
                  v-else
                  :src="require('@/assets/i/wap/course/chat_right_play.gif')"
                  alt=""
                />
                <div class="c-flex-row c-flex-center c-flex-1 c-fs24">点击播放</div>
                <span class="c-fs22 c-fc-white">{{item.recordTime}}"</span>
              </div>
            </div>
            <!-- 视频 -->
            <div class="c-mt24" v-if="item.videoMp4">
              <div class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center" @click.stop="clickShowVideo(item.videoMp4)">
                <i class="iconfont c-pa c-fs40" v-if="item.videoLogo != ''">&#xe869;</i>
                <img
                  class="c-w100 c-h c-br10 c-object-fit-cover"
                  :src="$addXossFilter(item.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')"
                  alt=""
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 追问回答 -->
        <div
          class="c-bg-sgray c-ph24"
          v-if="item.status == 2 && item.solution.length > 0"
        >
          <div
            class="c-w100 c-pt24"
            v-for="(childItem, childIndex) in item.solution"
            :class="childIndex < item.solution.length - 1 ? 'c-bd-b1-mgray':''"
            :key="childIndex"
          >
            <div class="c-flex-row c-aligni-center">
              <div class="c-ww64 c-hh64 c-brp50">
                <img
                  class="c-w100 c-h c-brp50"
                  v-lazy="$addXossFilter(answerInfo.avatar || require('@/assets/defult_head.png'))"
                  alt=""
                >
              </div>
              <div class="c-pl12 c-flex-column c-justify-sb c-flex-grow1 c-w0 c-hh64">
                <div class="c-flex-row c-justify-sb">
                  <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-center c-text-ellipsis1">
                    <span class="c-text-ellipsis1">{{answerInfo.name}}</span>
                    <span class="answer_m c-ml12"></span>
                  </div>
                </div>
                <div class="c-fs20 c-fc-gray">{{childItem.createdAt}}</div>
              </div>
            </div>
            <div class="c-w100 c-pv24">
              <div
                v-if="childItem.content"
                class="c-vcAlign-middle c-fs24 c-fc-xblack c-ws-pw"
              >{{childItem.content}}</div>
              <!-- 图片 -->
              <div
                class="c-w100 c-flex-row c-flexw-wrap"
                v-if="childItem.imgUrl"
              >
                <div
                  class="c-ww176 c-hh176 c-text-hidden thumbnail c-br10"
                  v-for="(imgItem, imgIndex) in childItem.imgUrl"
                  :key="imgIndex"
                  @click="clickPreviewImage(imgItem, childItem.imgUrl, imgIndex)"
                >
                  <img
                    class="c-w100 c-h img-pe-none c-object-fit-cover c-br10"
                    v-lazy="$addXossFilter(imgItem || require('@/assets/defult270.png'))"
                    alt=""
                  >
                </div>
              </div>
              <!-- 语音 -->
              <div v-if="childItem.audioUrl">
                <div
                  class="c-ww300 c-br10 c-pv16 c-ph20 c-fc-white c-bg-xgreen c-flex-row c-justify-center c-aligni-center"
                  @click.stop="clickPlayAudio(childItem.audioUrl, childItem.recordTime)"
                >
                  <img
                    class="c-ww30 c-hh30 c-rotate180"
                    v-if="playAduioSrc != childItem.audioUrl"
                    :src="require('@/assets/i/wap/course/chat_right_play.png')"
                    alt=""
                  />
                  <img
                    class="c-ww30 c-hh30 c-rotate180"
                    v-else
                    :src="require('@/assets/i/wap/course/chat_right_play.gif')"
                    alt=""
                  />
                  <div class="c-flex-row c-flex-center c-flex-1 c-fs24">点击播放</div>
                  <span class="c-fs22 c-fc-white">{{childItem.recordTime}}"</span>
                </div>
              </div>
              <!-- 视频 -->
              <div v-if="childItem.videoMp4">
                <div class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center" @click.stop="clickShowVideo(childItem.videoMp4)">
                  <i class="iconfont c-pa c-fs40" v-if="childItem.videoLogo != ''">&#xe869;</i>
                  <img
                    class="c-w100 c-h c-br10 c-object-fit-cover"
                    :src="$addXossFilter(childItem.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')"
                    alt=""
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="clickFreeChase()" class="c-w100 c-pb24 c-textAlign-c" v-if="questionInfo.isMe == 1 && (restAppendQuestionNum == 'N' || restAppendQuestionNum > 0)">
        <div class="c-ph24 c-hh48 c-lh48 c-inlineblack c-fs22 c-fc-white c-br32 theme-bg-gradient">免费追问{{restAppendQuestionNum * 1 > 0 ? `${restAppendQuestionNum}次` : ''}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CircleAnswerList",
  props: {
    enableQuestion: {
      type: Number,
      default: -1
    },
    answerInfo: {
      type: Object,
      default: {}
    },
    questionInfo: {
      type: Object,
      default: {}
    },
    userIdentity: {
      type: String,
      default: ""
    },
    chaseList: {
      type: Array,
      default: []
    },
    restAppendQuestionNum: {
      type: String,
      default: ""
    },
    playAduioSrc: {
      type: String,
      default: ""
    },
  },
  activated() {
    this.playAduioSrc = "";
  },
  methods: {
    clickPreviewImage(imgUrl, itemImgList, imgIndex) {
      this.$emit("clickPreviewImage", imgUrl, itemImgList, imgIndex);
    },
    clickPlayAudio(audioUrl, audioTime) {
      this.$emit("clickPlayAudio", audioUrl, audioTime);
    },
    clickShowVideo(videoSrc) {
      this.$emit("clickShowVideo", videoSrc);
    },
    clickFreeChase() {
      this.$emit("clickFreeChase")
    },
    openAnswerModal(questionDetailId, item) {
      this.$emit("openAnswerModal", questionDetailId, item)
    },
  }
}
</script>

<style lang="less" scoped>
.thumbnail {
  margin-top: 0.2rem;
}
.thumbnail:nth-child(3n + 2) {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.borderL:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.1rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--rgbcolor);
  content: "";
}
.circle_m, .circle_m_g, .answer_m {
  display: inline-block;
  width: 1.95rem;
  height: 0.7rem;
  background-size: contain;
}
.circle_m {
  background: url("../../../assets/i/wap/circle/circle_m.png") no-repeat center
    center;
  background-size: contain;
}
.circle_m_g {
  background: url("../../../assets/i/wap/circle/circle_m_gray.png") no-repeat
    center center;
  background-size: contain;
}
.answer_m {
  background: url("../../../assets/i/wap/circle/answer_m.png") no-repeat center
    center;
  background-size: contain;
}
.question {
  display: inline-block;
  width: 1.4rem;
  height: 0.7rem;
  background: #ffe5e5;
  border: 0.025rem solid #ff4040;
  border-radius: 0.1rem;
  color: #ff4040;
  font-size: 0.5rem;
  text-align: center;
  line-height: 0.7rem;
}
.fs96 {
  font-size: 2.4rem;
}
</style>